<template>
	<div class="tag-selected" @click="handleClick">
		<div class="tag-selected-text">{{ text }}</div>
		<div class="tag-selected-icon"><img src="@/assets/svgs/selected_down.svg" alt="" /></div>
	</div>
</template>

<script setup>
	defineProps({
		text: {
			type: String,
			default: '全部标签',
		},
	});
	const emits = defineEmits(['update:open']);
	function handleClick() {
		emits('update:open');
	}
</script>

<style lang="scss" scoped>
	.tag-selected {
		// width: 238px;
		@include mobileVwCalc(238px);
		height: 60px;
		border-radius: 36px;
		background-color: var(--blog-box-bg-color-gray);
		border: 1px solid #999999;
		padding: 12px 30px;
		@include flex(_, space-between);
        cursor: pointer;
		.tag-selected-text {
			width: 120px;
			@include text-overflow();
			@include font(_, 24px, _, 400, var(--blog-normal-text-color));
		}
		.tag-selected-icon {
			$size: 16px;
			width: $size;
			height: $size;
			flex-shrink: 0;
			img {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
